<template>
	<view class="content">
		<view class="head">
			<view class="head-left">
				<view class="head-title">
					<text class="head-title-text">
						鬼怪查询
					</text>
				</view>
				<view class="head-info">
					<text class="head-info-text">
						查询鬼怪属性，等级，血量等信息
					</text>
				</view>
				<!-- 选项框 -->
				<view class="select">
					<view class="select-item1">
						<picker @change="bindPickerChange" :value="selectIndex1" :range="arrayX" 
							class="picker">
							<view style="padding: 20rpx;color: #FFFFFF;">
								
								<template v-if="showDom"> 
									 等级
								</template>
								<template v-else>
										{{listArr[0].sType }}
								</template>
									
						
								
								<image src="../../../static/home/guaiwu/down.png" class="down-arrow"></image>
							</view>
						</picker>
					</view>
					<!-- <view class="select-item2">
						<picker @change="bindPickerChange1" :value="selectIndex" :range="array1" range-key="name">
							<view style="padding: 20rpx;color: #FFFFFF;">
								{{ array1[selectIndex].name }}
								<image src="../../../static/home/guaiwu/down.png" class="down-arrow"></image>
							</view>
						</picker>
					</view> -->
				</view>
			</view>
			<view class="head-right">
				<image class="bg-set" :src="headImage"></image>
			</view>
		</view>
		<!-- 列表 -->
		<!-- <view class="list">
			<view v-if="arrList[index]===0">
					<view class="list-item" v-for="(item,index) in array1" v-show="index>0">
						<view class="list-item-info">
							<text>
								{{item.name}}:{{item.value}}
							</text>
						</view>
						<view v-if="selectIndex===0" class="list-item-text-arr">
							<text v-for="(item1,index1) in item.adds" class="list-item-text">
								{{item1}}
							</text>
						</view>
						<view class="list-item-text" v-else>
							<text>
								{{item.adds[selectIndex-1]}}
							</text>
						</view>
					</view>
			</view>
			<view class="list-item" v-else>
				<view class="list-item-info">
					<text>
						{{array1[selectIndex1].name}}:{{array1[selectIndex1].value}}
					</text>
				</view>
				<view v-if="selectIndex===0" class="list-item-text-arr">
					<text v-for="(item,index) in array1[selectIndex+1].adds" class="list-item-text">
						{{item}}
					</text>
				</view>
				<view class="list-item-text" v-else>
					<text>
						{{array1[selectIndex1].adds[selectIndex-1]}}
					</text>
				</view>
			</view>
		</view> -->
		
		<!-- 列表 -->
		<view class="list">
			<!-- <view v-if="arrList[index]===0"> -->
					<view class="list-item" v-for="(item,index) in listArr" key="item.id">
						<view class="list-item-info">
							<text>
								{{item.sLv}}:{{item.sBlood}}
							</text>
						</view>
						<view class="list-item-text" >
							<text>
								{{item.sName}}
							</text>
						</view>
					</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import { list as guiguaiApi } from '@/api/guiguai'
	export default {
		data() {
			return {
				headImage: "../../../static/home/guaiwu/guaiwu-head.png",
				arrList:[],
				listArr:[],
				arrayX:['金系','木系','水系','火系','土系'],
				showDom:true,
				// array: [ {
				// 		name: '金系'
				// 	}, {
				// 		name: '木系'
				// 	}, {
				// 		name: '水系'
				// 	},
				// 	{
				// 		name: '火系'
				// 	},
				// 	{
				// 		name: '土系'
				// 	}
				// ],
				// array1: [{
				// 		name: '30-40级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	}, {
				// 		name: '40-50级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	}, {
				// 		name: '50-60级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '60-70级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '70-80级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '80-90级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '90级以上',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	}
				// ],
				selectIndex: 0,
				selectIndex1: 0,
			}
		},
		computed:{
			
			    
			
		},
		watch:{
			arrayX(newVal,oldVal){
				console.log('****',newVal,oldVal)
			}	
		},
		onLoad() {
			//初始化加载
			this.getguiguaiList()
			
			console.log(this.listArr.length == 0)
		},
		
		methods: {
			bindPickerChange(e) {
				// console.log('@@@@',e)
				var value = e.detail.value;
				this.selectIndex = value
				// console.log('@@@@',value)
				// // console.log('^',this.array[0].name)
				
				//展示筛选遍历过的数组
				 this.listArr = this.arrList.filter(item => item.sType == this.arrayX[value] )
				 this.showDom =false
				
				
				
				
			},
			bindPickerChange1(e) {
				var value = e.detail.value;
				this.selectIndex1 = value
				console.log(value)
				console.log('^',this.array1[0].name)
			},
			//全部鬼怪
			getguiguaiList () {
				 uni.request({
				     url: 'http://jianxia.mazhoudao.com/api/?data={%22cmd%22:%22monster%22}', 
				     success: (res) => {
				         // console.log(res.data);
				         this.arrList = res.data
						 
				     }
				 });
				
			},
			initList(){
				this.listArr = this.arrList.filter(item => item.sType == this.arrayX[0] )
			},
			//过滤重复系
			// deWeight() {
			//     for (var i = 0; i < this.arrOption.length - 1; i++) {
			//         for (var j = i + 1; j < this.arrOption.length; j++) {
			//             if (this.arrOption[i].name == this.arrOption[j].name) {
			//                 this.arrOption.splice(j, 1);
			//                 //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
			//                 j--;
			//             }
			//         }
			//     }
			//     return this.arrOption;
			// }
		},
		
	}
</script>

<style scoped>
	page {}

	.picker {
		width: 100%;
		/* height: 140px; */
		/* cursor: pointer; */
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		width: 100%;

	}


	.bg-set {
		width: 281rpx;
		height: 265rpx;
		float: right;
		margin-right: 54rpx;
		margin-top: 143rpx;
	}

	.head {
		display: flex;
		float: left;
		z-index: 900;
		width: 100%;
		height: 562rpx;
		background: linear-gradient(91deg, #1F282C, #405C69);
		/* background-color: #1F282C; */
	}

	.head-left {
		width: 50%;
		/* background-color: #0000FF; */
		height: 100%;

	}

	.head-right {
		width: 50%;
		height: 100%;
		/* background-color: #F0AD4E; */
	}

	.head-title {
		float: left;
		margin-top: 174rpx;
		margin-left: 38rpx;
		font-size: 50rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	.head-info {
		float: left;
		margin-top: 25rpx;
		margin-left: 39rpx;
		margin-right: 10rpx;
		font-size: 24rpx;
		color: #A0AAAF;
		line-height: 2;
		font-weight: 400;
	}

	.select {
		float: left;
		width: 100%;
		margin-top: 30rpx;
		margin-left: 43rpx;
		display: flex;
		/* background-color: #0000FF; */
	}

	.select-item1 {
		width: 40%;
	}

	.select-item2 {
		width: 60%;
	}

	.down-arrow {
		height: 24rpx;
		width: 24rpx;
		margin-left: 5rpx;
	}

	.list {
		margin-top: -140rpx;
		padding: 30rpx;
		z-index: 901;
		width: 100%;
	}

	.list-item {
		width: 90%;
		margin-left: 5%;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		/* 		padding-left: 20rpx;
		padding-right: 30rpx; */
		padding-bottom: 36rpx;
		padding-top: 33rpx;
		box-shadow: 0px -3px 47px 4px rgba(101, 102, 102, 0.1);
		display: flow-root;
	}

	.list-item-info {
		margin-left: 47rpx;
		margin-right: 47rpx;
		/* 		width: 100%; */
		/* background-color: #0000FF; */
		font-size: 32rpx;
		font-weight: bold;
		color: #474747;
		float: left;
	}

	.list-item-text {
		margin-left: 47rpx;
		margin-right: 47rpx;
		margin-top: 20rpx;
		/* width: 100%; */
		font-size: 28rpx;
		font-weight: 400;
		color: #474747;
		/* background-color: #0000FF; */
		float: left;
	}
	.list-item-text-arr{
		width: 100%;
		/* background-color: #09BB07; */
		display: flow-root;
	}
</style>
